<template>
    <ul>
        <li v-for="(item,index) in arr" :key="item.id" :class="{active:item.shifou}"><input type="checkbox"  @change="changes(item,$event)" :checked="item.shifou" >{{item.name}}<div @click="del(item)">x</div></li>
    </ul>
    <button @click="get('all')" :class="{active:adc==='all'}">全部:{{a}}</button>
    <button @click="get('finish')" :class="{active:adc==='finish'}">已完成:{{b}}</button>
    <button @click="get('unfinish')" :class="{active:adc==='unfinish'}">未完成：{{c}}</button>
</template>
<script setup>
    import {ref,defineEmits, toRefs,defineProps} from 'vue'
    let props = defineProps(['arr','a','b','c'])
    let {arr} = toRefs(props)
    let emits = defineEmits(['del','get'])
    // let col = ref()
    let del = function(item){
        emits('del',item)
    }
    let changes = function(item,e){
        // console.log(col.value);
        item.shifou = e.target.checked
    }
    let adc = ref('all')
    let get = function(a){
        emits('get',a)
        // console.log(arr.value);
        adc.value=a
    }


</script>
<style>
    .active{
        background-color: aqua;
    }

</style>